<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ $game['game_name'] }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/scss/h5_toapk/index.scss', 'resources/js/repack.js', 'resources/js/vuecomponents/components.js'])
</head>

<body>
    <div class="container" id="vapp">
        <div class="title">
            点击下方按钮进行下载
        </div>
        <div class="step">
            <template v-if="{{ $device_type }} == 2">
                <p>请下载APP进行游戏体验，需使用苹果手机的Safari浏览器打开，安装后会自动登录您在微信小游戏上的角色哦(下载链接附带账号密码请勿分享他人)</p>
            </template>
            <template v-else>
                <p>请下载APP进行游戏体验，使用浏览器打开，安装后会自动登录您在微信小游戏上的角色哦!(下载链接附带账号密码，请勿分享他人)</p>
            </template>
        </div>
        <div class="download-box" v-on:click="jump">
            <template v-if="{{ $device_type }} == 2">
                <button class="jump-btn">
                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-apple"
                            viewBox="0 0 16 16">
                            <path
                                d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
                            <path
                                d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516.024.034 1.52.087 2.475-1.258.955-1.345.762-2.391.728-2.43Zm3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422.212-2.189 1.675-2.789 1.698-2.854.023-.065-.597-.79-1.254-1.157a3.692 3.692 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56.244.729.625 1.924 1.273 2.796.576.984 1.34 1.667 1.659 1.899.319.232 1.219.386 1.843.067.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758.347-.79.505-1.217.473-1.282Z" />
                        </svg></div>
                    <div class="text">苹果版下载</div>
                </button>
            </template>
            <template v-else-if="{{ $device_type }} == 1">
                <button class="jump-btn">
                    <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                            class="bi bi-android2" viewBox="0 0 16 16">
                            <path
                                d="m10.213 1.471.691-1.26c.046-.083.03-.147-.048-.192-.085-.038-.15-.019-.195.058l-.7 1.27A4.832 4.832 0 0 0 8.005.941c-.688 0-1.34.135-1.956.404l-.7-1.27C5.303 0 5.239-.018 5.154.02c-.078.046-.094.11-.049.193l.691 1.259a4.25 4.25 0 0 0-1.673 1.476A3.697 3.697 0 0 0 3.5 5.02h9c0-.75-.208-1.44-.623-2.072a4.266 4.266 0 0 0-1.664-1.476ZM6.22 3.303a.367.367 0 0 1-.267.11.35.35 0 0 1-.263-.11.366.366 0 0 1-.107-.264.37.37 0 0 1 .107-.265.351.351 0 0 1 .263-.11c.103 0 .193.037.267.11a.36.36 0 0 1 .112.265.36.36 0 0 1-.112.264Zm4.101 0a.351.351 0 0 1-.262.11.366.366 0 0 1-.268-.11.358.358 0 0 1-.112-.264c0-.103.037-.191.112-.265a.367.367 0 0 1 .268-.11c.104 0 .19.037.262.11a.367.367 0 0 1 .107.265c0 .102-.035.19-.107.264ZM3.5 11.77c0 .294.104.544.311.75.208.204.46.307.76.307h.758l.01 2.182c0 .276.097.51.292.703a.961.961 0 0 0 .7.288.973.973 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h1.343v2.182c0 .276.097.51.292.703a.972.972 0 0 0 .71.288.973.973 0 0 0 .71-.288.95.95 0 0 0 .292-.703v-2.182h.76c.291 0 .54-.103.749-.308.207-.205.311-.455.311-.75V5.365h-9v6.404Zm10.495-6.587a.983.983 0 0 0-.702.278.91.91 0 0 0-.293.685v4.063c0 .271.098.501.293.69a.97.97 0 0 0 .702.284c.28 0 .517-.095.712-.284a.924.924 0 0 0 .293-.69V6.146a.91.91 0 0 0-.293-.685.995.995 0 0 0-.712-.278Zm-12.702.283a.985.985 0 0 1 .712-.283c.273 0 .507.094.702.283a.913.913 0 0 1 .293.68v4.063a.932.932 0 0 1-.288.69.97.97 0 0 1-.707.284.986.986 0 0 1-.712-.284.924.924 0 0 1-.293-.69V6.146c0-.264.098-.491.293-.68Z" />
                        </svg></div>
                    <div class="text">安卓版下载</div>
                </button>
            </template>
            <template v-else>
                <button class="jump-btn">
                    <div class="text">点击下载</div>
                </button>
            </template>
        </div>
        <div class="tips">
            注意：您的角色信息依然保留，转移后无法继续在小程序体验请您知悉，感谢您的支持!
        </div>
        <div class="question">
            如有问题，请返回公众号进行联系客服
        </div>

        <template v-if="maskShow">
            <div class="mask" v-on:click="closeMask">
                <div class="mask-text">
                    <p>1.请点击右上角按钮</p>
                    <p>2.选择【在浏览器中打开】</p>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                return {
                    isWechat: {{ $is_wechat }},
                    showMask: false,
                    deviceType: {{ $device_type }},
                    androidUrl: '{{ $android_url }}',
                    iosUrl: '{{ $ios_url }}',
                    accountInfo: '{!! $account_info !!}'

                }
            },
            computed: {
                maskShow() {
                    return this.showMask == true;
                }
            },
            methods: {
                jump() {
                    if (this.isWechat == 1) {
                        this.showMask = true;
                    } else {
                        let url = this.androidUrl;
                        if (this.deviceType == 2) {
                            url = this.iosUrl;
                            window.location.href = url;
                        } else {
                            // window.location.href = url;
                            const fileName = url.split('/').pop();
                            updateAPK(url, fileName, this.accountInfo);
                        }
                    }
                },
                closeMask() {
                    this.showMask = false;
                }
            }
        })
        app.mount('#vapp');
    })
</script>

</html>
